<template>
    <div class="main">
        <Nav />
        <div class="right_route">
            <div class="top_content">
                <div class="left_top_content">
                    <h3>订单统计</h3>
                </div>
                <div class="right_top_content">
                    <Picker @time_change="time_change"/>
                </div>
            </div>
           <div v-if="init_echart">
            <div class="top_echarts">
                <TopEcharts :list="list" />
            </div>
            <div class="top_table">
                <TopTable :list="list" />
            </div>
            <div class="bottom">
                <h3>订单类别数量top5</h3>
                <div class="bottom_content">
                    <div class="item">
                        <el-button type="primary" link size="large" class="button">VIP订单</el-button>
                        <div class="bottom_echarts">
                            <BottomEcharts id="bottom_echarts_one" :list="list.vip_list"/>
                        </div>
                    </div>
                    <div class="item">
                        <el-button type="primary" link size="large" class="button">普通订单</el-button>
                        <div class="bottom_echarts">
                            <BottomEcharts id="bottom_echarts_twe" :list="list.list"/>
                        </div>
                    </div>
                </div>
            </div>
           </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import Nav from "@/components/public/nav.vue"
import TopEcharts from "@/components/home/data/newusers/topEcharts.vue"
import TopTable from "@/components/home/data/order/topTable.vue"
import BottomEcharts from "@/components/home/data/newusers/bottomEcharts.vue"
import { get_order } from "@/request/api/data"
import { onMounted, ref } from "vue"
let init_echart = ref(true)
let time_value = ref("")
let list: any = ref({})
let params_init: any = {
    start_time: null,
    end_time : null
}
const get_data_use = async () => {
    let { data } = await get_order(params_init)
    console.log(data,"datadatadata");
    list.value = data
    init_data()
}
// 数据处理
const init_data = () => {
    // 返回：一个数组
    let key = Object.keys(list.value.line_chart)
    let arrY: any = []
    let arrX: any = []
    key.forEach((item: any) => {
        let a = new Date(item * 1000);
        arrX.push(a.toLocaleDateString().replace(/\//g, "-"))
        arrY.push(list.value.line_chart[item])
        list.value.arrX = arrX
        list.value.arrY = arrY
    })
}
const time_change =async(val:any)=>{
    init_echart.value = false
    params_init.start_time = val?.[0]
    params_init.end_time = val?.[1]
    await get_data_use()
    init_echart.value = true
}

onMounted(() => {
    get_data_use()
})
</script>
  
<style lang="scss" scoped>
.main {
    display: flex;

    .right_route {
        padding: 10px 20px 0 20px;
        flex: 1;
        box-sizing: border-box;
        background: rgba(#FFF, 1);
        width: calc(100vw - 200px);

        .top_content {
            display: flex;
            justify-content: space-between;

            .left_top_content {
                h3 {
                  margin: 10px 0 20px;
                      color: #1f2f3d;
                      font-weight: 400;
                      font-size: 22px;

                    span {
                        @include font(#666666, 14, 32);
                        font-weight: 400;
                        margin-left: 20px;
                    }
                }
            }
            .right_top_content{
                margin-right: 40px 
            }
        }

        .top_echarts {
           border: 1px solid #ebebeb;
           margin-top: 20px;
           border-radius: 3px;
               transition: 0.2s;
        }

        .top_table {
            margin-top: 10px;
        }

        .bottom {
            margin-top: 10px;

            h3 {
                // @include font(#333, 24, 32);
                // font-weight: 650;
				    margin: 55px 0 20px;
					color: #1f2f3d;
					font-weight: 400;
					font-size:22px;
            }

            .bottom_content {
                display: flex;
				border: 1px solid #ebebeb;
				border-radius: 3px;
				transition: .2s;
				padding: 24px;
				margin-bottom: 50px;
				  .item:nth-child(1){
					  border:none;
				  }
                .item {
                    width: 50%;
					border-left:1px solid #ebebeb;
                    // text-align: center;
                    .button {
                        width: 140px;
                        height: 40px;
						margin-left:40%;
						color:#1f2f3d;
						border-bottom:1px solid #1f2f3d;
                    }

                    .bottom_echarts {
                        width: 100%;
                        height: 200px;
                    }
                }
            }
        }
    }
}</style>